<template>
	<view style="min-height: 100vh;" @click="pageClick">
		<view class="search-box">
			<u-search id="aaa" shape="square" height="88"
				ref="searchE"
				bg-color="#F7F8FA"
				placeholder="请输入工号/电话/姓名/邮箱"
				placeholder-color="#CCCCCC"
				search-icon-color="#999999"
				:action-style="{fontSize: '30rpx', fontWeight: 'bold', color: '#0071C5'}"
				:input-style="{fontSize: '28rpx'}"
				maxlength="30"
				v-model="searchKey"
				@search="search" @custom="search"
				focus
				@focus="isFocus = true">
			</u-search>
		</view>
		<view class="search-history-box" v-if="isFocus">
			<view class="u-flex u-row-between u-p-b-20">
				<view class="search-history-title">
					搜索历史
				</view>
				<view class="search-history-clear-btn" @click="clearHistory">
					清空
				</view>
			</view>
			<view>
				<text class="search-history-text" v-for="(item, i) in historyArr" :key="i" @click="chickHistory(item)">{{item}}</text>
			</view>
		</view>
		<view class="search-user-list" v-if="!isFocus">
			<view class="message-list-item" v-for="(item, i) in searchUserList" :key="i" @click="clickUser(item)">
				<view class="message-icon">
					<u-avatar :text="item.name.substr(-1)" mode="circle" bg-color="#0071C5" color="#FFFFFF"></u-avatar>
				</view>
				<view class="message-content">
					<view class="message-type-title">
						<view class="u-flex-1">
							{{item.name}}
						</view>
					</view>
					<view class="message-item u-line-1">
						{{item.orgName}}{{item.positionName}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: '',
				historyArr: [],
				isFocus: false,
				searchUserList: []
			}
		},
		methods: {
			pageClick(e) {
				if (e.target.offsetLeft !== 44)
				this.isFocus = false
			},
			search(val) {
				this.$refs.searchE.blur() 
				if (val !== '') {
					if(this.historyArr.indexOf(val) === -1) {
						this.historyArr.push(val)
					}
					this.$u.api.searchUser({pageSize: 20, currentPage: 1, keyword: val}).then(res => {
						this.searchUserList = res.list
						uni.setStorageSync('SEARCHHISTORY', this.historyArr)
						this.isFocus = false
					}).catch(err => {
						console.log(err)
					})
				}
			},
			chickHistory(val) {
				this.searchKey = val
				this.search(val)
			},
			clearHistory() {
				this.historyArr = []
				uni.removeStorageSync('SEARCHHISTORY')
			},
			clickUser(pUser) {
				if (!isSelUser) {
					this.toUserInfo(pUser.userId)
				} else {
					uni.$emit('selected-user', {label: pUser.name, value: pUser.userId})
					this.$u.route({type: 'back', delta: 2})
				}
			},
			toUserInfo(pUserId) {
				this.$u.route('pages/contacts/user-info', {id: pUserId})
			}
		},
		onLoad() {
			this.historyArr = uni.getStorageSync('SEARCHHISTORY')||[]
		}
	}
</script>

<style lang="scss" scoped>
	.search-history-box {
		padding: 30rpx;
		background-color: #FFFFFF;
		.search-history-title {
			font-size: 26rpx;
			color: #999999;
		}
		.search-history-clear-btn {
			font-size: 28rpx;
			font-weight: bold;
		}
		.search-history-text {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx;
			min-width: 106rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			font-size: 22rpx;
			border-radius: 10rpx;
			color: #67788B;
			background-color: #F7F8FA;
		}
	}
	.search-user-list {
		padding:  0 30rpx;
		background-color: #FFFFFF;
	}
	
	.message-list-item {
		display: flex;
		margin-bottom: 20rpx;
		.message-icon {
			position: relative;
			width: 88rpx;
			height: 88rpx;
		}
		.message-content {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			border-bottom: 1px solid #F7F8FA;
			.message-type-title {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				.message-time {
					width: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
			.message-item {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
